import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { useI18n } from '@/hooks/web/useI18n';

const { t } = useI18n();

// 表头数据
export const columns: BasicColumn[] = [
  {
    title: 'id',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '用户组名称',
    dataIndex: 'userGroupName',
    width: 200,
  },
  {
    title: '用户组描述',
    dataIndex: 'userGroupDescription',
    width: 300,
  },
  {
    title: '用户组状态',
    dataIndex: 'userGroupStatus',
    width: 100,
    customRender: ({ text }) => {
      const statusMap = {
        1: { text: '有效', color: 'green' },
        2: { text: '无效', color: 'red' },
      };
      const status = statusMap[text] || { text: '-', color: 'black' };
      return h('span', { style: { color: status.color } }, status.text);
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
  },
];

// 表单结构
export const schemas: FormSchema[] = [
  {
    field: 'id',
    label: 'ID',
    component: 'Input',
    show: false, // 隐藏字段，不显示在表单中但会随表单提交
  },
  {
    field: 'userGroupName',
    label: '用户组名称',
    colProps: {
      span: 24, // 单独一行显示
    },
    component: 'Input',
    required: true,
    rules: [{ required: true, message: '请输入用户组名称', trigger: 'blur' }],
  },
  {
    field: 'userGroupDescription',
    label: '用户组描述',
    component: 'InputTextArea',
    required: false,
    colProps: {
      span: 24, // 单独一行显示
    },
  },
  {
    field: 'userGroupStatus',
    label: '用户组状态',
    component: 'Select',
    required: true,
    colProps: {
      span: 24, // 单独一行显示
    },
    defaultValue: '1',
    ifShow: ({ values }) => !!values.id,
    componentProps: {
      options: [
        { label: '有效', value: '1' },
        { label: '无效', value: '2' },
      ],
    },
  },
];

// 搜索表单结构
export const searchSchemas: FormSchema[] = [
  {
    field: 'userGroupName',
    label: '用户组名称',
    component: 'Input',
    colProps: {
      span: 8,
    },
  },
  {
    field: 'userGroupStatus',
    label: '用户组状态',
    component: 'Select',
    colProps: {
      span: 8,
    },
    componentProps: {
      options: [
        { label: '全部', value: '' },
        { label: '有效', value: '1' },
        { label: '无效', value: '2' },
      ],
    },
  },
];
